<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格中的计算属性</title>

</head>
<body>

<div id="app">

    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>工资</th>
        </tr>
        </thead>

        <tbody>

          <tr v-for="emp in employees">
              <td>{{emp.name}}</td>
              <td>{{emp.age}}</td>
              <td>{{emp.salary}}</td>
          </tr>


        </tbody>
    </table>
    <hr>
    <div>
        总工资:  {{total2}}平均工资: 平均年龄:
    </div>

</div>

</body>
<script src="../../../demo/lib/vue.global.js"></script>
<script src="db/employees.js"></script>
<script>

    var app = Vue.createApp({
        data:function (){
            return {
                employees:employees
            }
        },computed:{
            total:function (){
                var sum =0;

                for (var i = 0; i <employees.length ; i++) {
                   sum+=employees[i].salary;
                }

                return sum;
            },
            total2:function (){

               return  employees.reduce(function (sum,curr){
                     return sum+curr.salary;
                },0)
            }
        }
    });

    app.mount('#app')

</script>

</html>